<template>
    <div id="record">
        <navbar :title="title"></navbar>
        <div class="placeholder"></div>
        <div class="form">
            <div class="list">
                <label>游戏名称：</label>
                <span>{{detail.game_name}}</span>
            </div>
            <div class="list">
                <label>申请账号：</label>
                <span>{{detail.account}}</span>
            </div>
            <div class="list">
                <label>充值金额：</label>
                <span class="money">{{detail.money}}元</span>
            </div>
            <div class="list">
                <label>返利元宝：</label>
                <span class="money">{{detail.rebate_num}}</span>
            </div>
            <div class="list">
                <label>充值日期：</label>
                <span>{{detail.recharge_time}}</span>
            </div>
            <div class="list">
                <label>游戏区服：</label>
                <span>{{detail.server}}</span>
            </div>
            <div class="list">
                <label>角色名称：</label>
                <span>{{detail.rolename}}</span>
            </div>
            <div class="list">
                <label>申请日期：</label>
                <span>{{detail.create_time}}</span>
            </div>
            <div class="list remark_list">
                <label>申请备注：</label>
                <span>{{detail.remarks}}</span>
            </div>
            <div class="list">
                <label>发放状态：</label>
                <span v-if="detail.status==1||detail.status==4">待处理</span>
                <span v-else-if="detail.status==2">返利成功</span>
                <span v-else>返利失败</span>
            </div>
            <div class="remarks remark_list">
                <label>发放备注：</label>
                <span>{{detail.rebate_marks}}</span>
            </div>
            <div class="btns">
                <button class="goback" @click="goback">返回</button>
            </div>
        </div>
    </div>
</template>

<script>
    import navbar from 'common/navbar'
    export default {
        data(){
            return{
                title:'申请返利详情',
                detail:[]
            }
        },
        created(){
            this.detail=this.$route.query;
        },
        methods:{
            goback(){
                 this.$router.back();
            }
        },
        mounted(){
            document.getElementsByClassName("container")[0].style="height:0;overflow:hidden;";
        },
        beforeDestroy: function() {
            try{
                document.getElementsByClassName("container")[0].style="height:auto;overflow:auto;";
            }catch(err){

            }
        },
        components:{
            navbar
        }
    }
</script>

<style scoped lang="scss">
@import "~styles/variable.scss";
@import "~styles/mixins.scss";
#record{
    width:7.5rem;
    position:fixed;
    top:0;
    left:50%;
    right:0;
    bottom:0;
    background:#fff;
    z-index:9999;
    overflow: scroll;
    transform:translateX(-50%);
}
.placeholder{
    width:100%;
    height:0.8rem;
}
.list{
    padding:0 0.3rem;
    height:0.8rem;
    line-height:0.8rem;
    border-bottom:1px solid #f2f2f2;
    font-size:$font-size-m;
    span{
        color:#b0b0b0;
        &.money{
            color:#ff5e49;
        }
    }
}
.remark_list{
    display:flex;
    height:auto;
    line-height:.4rem;
    padding:.2rem .3rem;
    span{
        flex:1;
    }
}
.remarks{
    padding:0.1rem 0.3rem 0 0.3rem;
    line-height:0.4rem;
    font-size:$font-size-m;
    color:#2499ff;
}
.btns{
    margin-top:0.9rem;
    padding-bottom:1rem;
    text-align: center;
    button{
        margin-bottom:0.36rem;
        width:6.6rem;
        height:0.9rem;
        line-height:0.9rem;
        font-size:$font-size-m;
        border:none;
        outline: none;
        border-radius:0.45rem;
        &.goback{
            background:$color-focus;
            color:#fff;
        }
    }
}
</style>